<template>
  <div class="parentBox">
      <Parent :parentData = "parentData.parent" v-if="parentData.parent"/>
      <div class="info">
          <div class="name">{{parentData.user.nickname || parentData.user.username}}</div>
          <div class="date">2小时前</div>
          <div class="btn" @click="sendComment">回复</div>
      </div>
      <div class="content">
          {{parentData.content}}
      </div>
      
  </div>
</template>

<script>
import eventBus from '../utils/eventBus'
export default {
    name:'Parent',
    props:[
        'parentData'
    ],
    methods:{
        sendComment(){
            eventBus.$emit('sendMsg',this.parentData.id);
        }
    }

}
</script>

<style lang="less" scoped>
    .parentBox{
        padding: 2px;
        margin: 2px;
        border: 1px solid #e4e4e4;
    }
    .info{
        display: flex;
        align-items: center;
        font-size: 16/360*100vw;
        color:#333;
        margin-bottom: 10/360*100vw;
        .date{
            flex:1;
            color:#888;
            font-size: 14/360*100vw;
            padding-left: 10/360*100vw;
        }
    }
    .btn{
        font-size: 14/360*100vw;
        color:#888;
    }
    .content{
        font-size: 16/360*100vw;
        padding: 10/360*100vw;
        color:#666;
    }
</style>